<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('投资主体')" prop="investmentId">
            <el-select v-model="form.investmentId" :placeholder="$t('投资主体')" @change="investmentChange">
              <el-option
                v-for="dict in investorOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'reviesed'" :span="12">
          <el-form-item :label="$t('报告时间')" prop="reportDate">
            <DatePicker v-model="form.reportDate" :placeholder="$t('报告时间')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="initialCaseAssumptionsTitle" prop="initialCaseAssumptions">
            <el-input v-model="form.initialCaseAssumptions" type="textarea" :placeholder="initialCaseAssumptionsTitle" show-word-limit :maxlength="caseLength" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="area-header">
            <span class="area-header-title">{{ initialCaseAssumptionsTitle }}</span>
          </div>
        </el-col>
        <el-table
          :data="form.dealCathayCaseDetailList"
          border
          class="nowrapTable formTable"
        >
          <el-table-column prop="phase" :label="$t('')" align="center" type="index" :fixed="true" width="150px">
            <template slot-scope="scope">
              {{ scope.row.type }}
            </template>
          </el-table-column>
          <el-table-column prop="caseDate" :label="$t('Date')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.caseDate'">
                <DatePicker
                  v-model="scope.row.caseDate"
                  :placeholder="$t('Date')"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="netEquityValue" :label="$t('Cathay Net Equity Value(M)')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.netEquityValue'">
                <el-input v-model="scope.row.netEquityValue" :maxlength="20" :placeholder="$t('Cathay Net Equity Value')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="partialExit" :label="$t('Partial Exit(M)')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.partialExit'">
                <el-input v-model="scope.row.partialExit" :maxlength="20" :placeholder="$t('Partial Exit')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="dividendsDistributed" :label="$t('Dividends distributed(M)')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.dividendsDistributed'">
                <el-input v-model="scope.row.dividendsDistributed" :maxlength="20" :placeholder="$t('Dividends distributed')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="companyRate" :label="$t('% of the company')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.companyRate'">
                <el-input v-model="scope.row.companyRate" :maxlength="20" :placeholder="$t('% of the company')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="cathayIrr" :label="$t('Cathay IRR')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.cathayIrr'">
                <el-input v-model="scope.row.cathayIrr" :maxlength="20" :placeholder="$t('Cathay IRR')" align="right" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="cathayMm" :label="$t('Cathay MM')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.cathayMm'">
                <el-input v-model="scope.row.cathayMm" :maxlength="20" :placeholder="$t('Cathay MM')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="sales" :label="$t('Sales(M)')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.sales'">
                <el-input v-model="scope.row.sales" :maxlength="20" :placeholder="$t('Sales')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="grossMargin" :label="$t('Gross margin')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.grossMargin'">
                <el-input v-model="scope.row.grossMargin" :maxlength="20" :placeholder="$t('Gross margin')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="netProfit" :label="$t('Net profit(M)')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.netProfit'">
                <el-input v-model="scope.row.netProfit" :maxlength="20" :placeholder="$t('Net profit')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="pE" :label="$t('P / E')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.pE'">
                <el-input v-model="scope.row.pE" :maxlength="20" :placeholder="$t('P / E')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="ebitda" :label="$t('EBITDA(M)')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.ebitda'">
                <el-input v-model="scope.row.ebitda" :maxlength="20" :placeholder="$t('EBITDA')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="evEbitda" :label="$t('EV / EBITDA')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.evEbitda'">
                <el-input v-model="scope.row.evEbitda" :maxlength="20" :placeholder="$t('EV / EBITDA')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="enterpriseValue" :label="$t('Enterprise Value(M)')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.enterpriseValue'">
                <el-input v-model="scope.row.enterpriseValue" :maxlength="20" :placeholder="$t('Enterprise Value')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="furtherDilution" :label="$t('Further dilution (if any)')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.furtherDilution'">
                <el-input v-model="scope.row.furtherDilution" :maxlength="20" :placeholder="$t('Further dilution (if any)')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="equityValue" :label="$t('Equity value (post money)(M)')" align="center" width="200px">
            <template slot-scope="scope">
              <el-form-item :prop="'form.dealCathayCaseDetailList.'+scope.$index+'.equityValue'">
                <el-input v-model="scope.row.equityValue" :maxlength="20" :placeholder="$t('Equity value (post money)')" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        <el-col v-if="type === 'reviesed'" :span="24">
          <el-form-item :label="$t('Revised main case assumptions')" prop="mainAssumptions">
            <el-input v-model="form.mainAssumptions" type="textarea" :placeholder="$t('Revised main case assumptions')" show-word-limit maxlength="2000" />
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'reviesed'" :span="24">
          <el-form-item :label="$t('Revised upside case assumptions')" prop="upsideAssumptions">
            <el-input v-model="form.upsideAssumptions" type="textarea" :placeholder="$t('Revised upside case assumptions')" show-word-limit maxlength="2000" />
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'reviesed'" :span="24">
          <el-form-item :label="$t('Revised downside case assumptions')" prop="downsideAssumptions">
            <el-input v-model="form.downsideAssumptions" type="textarea" :placeholder="$t('Revised downside case assumptions')" show-word-limit maxlength="2000" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="case:case" />
    </div>
  </div>
</template>

<script>
    import { saveDealCathayCase, getDealCathayCase, initDealCathayCase, checkAdded } from '@/api/sass/kaihui/case/dealCathayCase'
    import { listDealInvestmentAll } from '@/api/deal/investment/dealInvestment'
    export default {
        data() {
            return {
                // 表单参数
                form: {
                  dealCathayCaseDetailList: []
                },
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {
                  investmentId: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  reportDate: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
                },
                dealId: undefined,
                type: undefined,
                initialCaseAssumptionsTitle: 'Initial Case Assumptions',
              caseLength: '2000',
              investorOptions: []
            }
        },
        created() {

        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                this.dealId = data.dealId
                this.type = data.type
                this.listDealInvestmentAll()
                if (this.type === 'reviesed') {
                  this.initialCaseAssumptionsTitle = 'Actual business development'
                  this.caseLength = '2000'
                }
                if (data != null && data.id !== undefined) {
                    getDealCathayCase(data.id).then(response => {
                        this.form = response.data
                        this.loading = false
                    })
                } else {
                  initDealCathayCase(this.dealId, this.type).then(response => {
                    this.form = response.data
                    this.loading = false
                  })
                }
            },
            listDealInvestmentAll() {
              this.investorOptions = []
              listDealInvestmentAll({ dealId: this.dealId }).then(response => {
                console.log(response.data)
                if (response.data !== null && response.data !== undefined) {
                  response.data.forEach(item => {
                    const option = {
                      dictLabel: item.investorName,
                      dictValue: item.id
                    }
                    this.investorOptions.push(option)
                  })
                }
              })
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    type: undefined,
                    dealId: undefined,
                    investmentId: undefined,
                    initialCaseAssumptions: undefined,
                    mainAssumptions: undefined,
                    upsideAssumptions: undefined,
                    downsideAssumptions: undefined,
                    createBy: undefined,
                    createTime: undefined,
                    updateBy: undefined,
                    updateTime: undefined,
                    remark: undefined,
                    dealCathayCaseDetailList: []
                }
                this.resetForm('form')
                this.form.dealId = this.dealId
                this.form.type = this.type
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            investmentChange() {
                if (this.type === 'initial') {
                  const data = {
                    id: this.form.id,
                    dealId: this.dealId,
                    investmentId: this.form.investmentId
                  }
                  checkAdded(data).then(response => {
                    if (!response.data) {
                      this.form.investmentId = ''
                      this.msgError(this.$t('该投资主体已创建Initial case'))
                    }
                  })
                }
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveDealCathayCase(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                })
           }

        }

    }
</script>
